<template>
    <el-dialog title="新增" :visible="isShowAddDialog" width="70%" @close="dialogClose()" :close-on-click-modal="false">
        <el-form :model="ruleFormBefore" ref="addBefore" label-width="110px">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="拍卖会编号" prop="pmhbh">
                        <el-select v-model="ruleFormBefore.pmhbh" placeholder="选择后点击查询" style="width: 100%;">
                            <el-option
                                v-for="item in ruleFormBefore.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="getBhData">查询</el-button>
                </el-col>
            </el-row>
            
        </el-form>
        <el-form :model="ruleForm" :rules="rules" ref="noticeAdd" label-width="110px" :close-on-click-modal="false" :disabled="isDisabled">


            <el-form-item label="开拍时间" prop="kpsj" style="width:100%">
                <el-date-picker
                v-model="ruleForm.kpsj"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                disabled>
                </el-date-picker>
            </el-form-item>
            <el-form-item label="拍卖会名称" prop="pmhmc">
                <el-input v-model="ruleForm.pmhmc" style="width:100%" disabled>
                </el-input>
            </el-form-item>
            <el-form-item label="拍卖公告名称" prop="pmggmc">
                <el-input v-model="ruleForm.pmggmc"></el-input>
            </el-form-item>

            <el-form-item label="拍卖公告类型" prop="pmgglx">
                <el-select v-model="ruleForm.pmgglx" style="width:100%">
                    <el-option
                        v-for="item in this.noticeTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="预展时间" prop="yzsj" style="width:100%">
                <el-date-picker
                v-model="ruleForm.yzsj"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss">
                
                </el-date-picker>
            </el-form-item>
            <el-form-item label="预展地点" prop="yzdd">
                <el-input v-model="ruleForm.yzdd"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="lxr">
                <el-input v-model="ruleForm.lxr"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="lxdh">
                <el-input v-model="ruleForm.lxdh"></el-input>
            </el-form-item>
            <el-form-item label="媒体名称" prop="mtmc">
                <el-input v-model="ruleForm.mtmc"></el-input>
            </el-form-item>
            <el-form-item label="媒体发布时间" prop="mtfbsj">
                <el-date-picker
                v-model="ruleForm.mtfbsj"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="是否为罚没、涉黑、涉案、查处、扣押资产：" label-width="320px" prop="sffmsh">
                <el-radio-group v-model="ruleForm.sffmsh">
                    <el-radio label="true">是</el-radio>
                    <el-radio label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="公告内容" prop="ggnr">
                <!-- <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 14}" placeholder="请输入内容" v-model="ruleForm.ggnr">
                </el-input> -->
                <QuillEditor @changeClick="quillChange1" class="editor"></QuillEditor>
                <div style="color:#f00">
                    *如果您的公告包含表格，为了排版以及美观，推荐将表格以图片形式插入</div>
            </el-form-item>
            <el-form-item label="竞拍须知" prop="jpxz">
                <!-- <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 14}" placeholder="请输入内容" v-model="ruleForm.jpxz">
                </el-input> -->
                <QuillEditor @changeClick="quillChange2" class="editor"></QuillEditor>
            </el-form-item>

            <el-form-item label="发布媒体" prop="fbmt">
                <el-radio label="1" v-model="ruleForm.fbmt" @change="publiChange">纸质媒体</el-radio>
                <el-radio label="2" v-model="ruleForm.fbmt" @change="publiChange">网络媒体</el-radio>
            </el-form-item>

            <el-row :gutter="24">
                <el-form-item label="媒体整版截图" prop="szmtjt" v-if="!inter">
                    <el-upload class="avatar-uploader" :action='actionLogo2' list-type="picture-card"
                        :show-file-list="false" :on-success="logohandleAvatarSuccess2" name="mtjt">
                        <img v-if="this.logo2Url" :src="this.logo2Url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="公告特写截图" prop="txjt" v-if="!inter">
                    <el-upload class="avatar-uploader" :action='actionLogo3' list-type="picture-card"
                        :show-file-list="false" :on-success="logohandleAvatarSuccess3" name="txjt">
                        <img v-if="this.logo3Url" :src="this.logo3Url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="上传网页图片" prop="wyjt" v-if="inter">
                    <el-upload class="avatar-uploader" :action='actionLogo4' list-type="picture-card"
                        :show-file-list="false" :on-success="logohandleAvatarSuccess4" name="wyjt">
                        <img v-if="this.logo4Url" :src="this.logo4Url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-row>
            <el-form-item label="公告链接" v-if="inter" prop="gglj">
                <el-input v-model="ruleForm.gglj"></el-input>
            </el-form-item>

            <el-form-item label="上传附件" prop="scfj">
                <el-upload class="upload-demo" :action="actionFile"
                    :limit="1"
                    :on-success="handleChange" v-model="this.ruleForm.scfj"
                    :on-remove="handleRemove">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogClose()">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { addData,getPmhbh,getWthtbhData } from '@/api/auctionManage/noticeManage';
import { getSelectData } from '@/api/dictionary';
import QuillEditor from '@/components/pages/quillEditor.vue';
export default {
    components: {
        QuillEditor
    },
    data() {
        return {
            ruleFormBefore:{
                options: [],
                pmhbh: '',
            },
            ruleForm: {
                pmggbh: '',//拍卖公告编号
                pmggmc: '',//拍卖公告名称
                pmgglx: 1,//拍卖公告类型
                pmhmc: '',//拍卖会名称
                pmss: '',//拍卖时间
                pmdd: '',//拍卖地点
                yzsj: '',//预展时间
                yzdd: '',//预展地点
                lxr: '',//联系人
                lxdh: '',//联系电话
                mtmc: '',//媒体名称
                szmtjt: '',//公告所在媒体整版截图
                txjt: '',//公告特写截图
                wyjt: '',//上传网页截图
                gglj: '',//公告链接
                fbzj: 0,//发布状态，0待提交，1已提交
                tjsj: '',//提交时间
                mtfbsj: '',//媒体发布时间
                sffmsh: false,//是否为罚没涉黑涉案查处扣押资产
                ggnr: '',//公告内容
                jpxz: '',//竞拍须知
                scfj: '',//上传附件
                deleteflag: false,//逻辑删除
                creates: '',//创建时间
                fbmt: '1',// 发布媒体，1为纸质媒体，2为网络媒体
                pmhbh: '',//拍卖会编号
                ggksrq: '',//公告开始日期
                ggjsrq: '',//公告结束日期
                sfkygg: false,//保留价或起拍价是否可以公告
                kpsj: ''
            },
            actionLogo2: '/api/notices/addNoticeFile2',
            actionLogo3: '/api/notices/addNoticeFile3',
            actionLogo4: '/api/notices/addNoticeFile4',
            actionFile: '/api/notices/addNoticeFile1',
            logo2Url: '',
            logo3Url: '',
            logo4Url: '',
            inter: false,
            isDisabled: true,
            noticeTypeOptions: [],
            rules: {
                pmggmc: [
                    { required: true, message: '请输入公告名称', trigger: 'blur' }
                ],
                pmgglx: [
                    { required: true, message: '请选择公告类型', trigger: 'change' }
                ],
                // pmhmc: [
                //     { required: true, message: '请选择拍卖会名称', trigger: 'change' }
                // ],
                pmhbh: [
                    { required: true, message: '请输入拍卖会编号', trigger: 'blur' }
                ],
                yzsj: [
                    { required: true, message: '请选择预展时间', trigger: 'blur' }
                ],
                yzdd: [
                    { required: true, message: '请输入预展地点', trigger: 'blur' }
                ],
                lxdh: [
                    { required: true, message: '请输入联系人电话', trigger: 'blur' }
                ],
                mtmc: [
                    { required: true, message: '请输入媒体名称', trigger: 'change' }
                ],
                mtfbsj: [
                    { required: true, message: '请选择媒体发布时间', trigger: 'blur' }
                ],
                sffmsh: [
                    { required: true, message: '请选择是否为罚没、涉黑、涉案、查处、扣押资产', trigger: 'change' }
                ],
                ggnr: [
                    { required: true, message: '请输入公告内容', trigger: 'blur' }
                ],
                jpxz: [
                    { required: true, message: '请输入竞拍须知', trigger: 'blur' }
                ],
                fbmt: [
                    { required: true, message: '请选择发布媒体', trigger: 'blur' }
                ],
                // szmtjt: [
                //     { required: true, message: '请上传图片', trigger: 'change' }
                // ],
                // txjt: [
                //     { required: true, message: '请上传图片', trigger: 'change' }
                // ],
                // wyjt: [
                //     { required: true, message: '请上传图片', trigger: 'change' }
                // ],
                gglj: [
                    { required: true, message: '请输入公告链接', trigger: 'change' }
                ],
            },
        };

    },
    props: {
        isShowAddDialog: {
            type: Boolean
        }
    },



    methods: {
        formatTime(time){
            var dateee = new Date(time).toJSON();
            return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
        },
        quillChange1(data){
            console.log(data);
            this.ruleForm.ggnr = data;
        },
        quillChange2(data){
            console.log(data);
            this.ruleForm.jpxz = data;
        },
        dialogClose() {
            this.$emit('dialogClose');
            this.$emit('getList');
        },
        submitForm() {
            this.ruleForm.mtfbsj = this.formatTime(this.ruleForm.mtfbsj);
            this.ruleForm.yzsj = this.formatTime(this.ruleForm.yzsj);
            this.ruleForm.pmsj = this.formatTime(this.ruleForm.kpsj);
            delete this.ruleForm.kpsj;
            if(this.ruleForm.sffmsh == 'true'){
                this.ruleForm.sffmsh = true;
            }
            else{
                this.ruleForm.sffmsh = false;
            }
            if(this.ruleForm.fbmt == '1'){
                this.ruleForm.fbmt = 1;
            }
            else{
                this.ruleForm.fbmt = 2;
            }
            console.log(this.ruleForm);
            this.$refs.noticeAdd.validate((valid) => {
                if (!valid) {
                    return ;
                }
                else {
                    console.log(this.ruleForm);
                    addData(this.ruleForm).then((res) => {
                        if(res){
                            console.log(res.msg);
                            console.log(res.data);
                            this.dialogClose();
                        }
                    })
                }
            });

        },
        publiChange(e) {
            console.log(e);
            if (e == 2) {
                this.inter = true;
            }
            else {
                this.inter = false;
            }
        },
        // 上传图片
        logohandleAvatarSuccess2 (file) {
            this.ruleForm.szmtjt = file.data;
            this.logo2Url = file.data;
        },
        logohandleAvatarSuccess3 (file) {
            this.ruleForm.txjt = file.data;
            this.logo3Url = file.data;
        },
        logohandleAvatarSuccess4 (file) {
            this.ruleForm.wyjt = file.data;
            this.logo4Url = file.data;
        },
        handleChange(file, fileList) {
            console.log(file);
            this.ruleForm.scfj = file.data;
            // this.fileList = fileList.slice(-3);
        },
        handleRemove(file, fileList) {
            console.log(file);
            this.ruleForm.scfj = null;
        },
        getBh(){
            getPmhbh().then((res) => {
                if(res){
                    console.log(res);
                    this.ruleFormBefore.options = res.data;
                    for(let item in this.ruleFormBefore.options){
                        this.ruleFormBefore.options[item].label = this.ruleFormBefore.options[item].pmhbh;
                        this.ruleFormBefore.options[item].value = this.ruleFormBefore.options[item].pmhbh;
                    }
                }
            })
        },
        getBhData(){
            getWthtbhData(this.ruleFormBefore.pmhbh).then((res) => {
                let temp = this.ruleFormBefore.pmhbh;
                if(this.ruleFormBefore.pmhbh){
                    this.isDisabled = false;
                }
                else{
                    return ;
                }
                if(res){
                    console.log(res);
                    this.ruleForm = res.data;
                    this.ruleForm.mtmc = res.data.ggmtmc;
                    // delete this.ruleForm.ggmtmc;
                    this.ruleForm.pmhbh = temp;
                }
            })
        },
        getSelectNoticeType(){
            let data = '公告类型';
            getSelectData(data).then((res) => {
                if(res){
                    for(let item in res.data){
                        this.noticeTypeOptions.push({
                            label: res.data[item],
                            value: res.data[item]
                        })
                    }
                }
                // console.log(this.auctionTypeOptions);
            })
        }
    },
    mounted(){
        this.getBh();
        this.getSelectNoticeType();
    }
}
</script>
  
<style scoped lang="less">
    .editor{
        height: 200px; 
        margin-bottom: 100px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
    }

    .avatar {
        width: 146px;
        height: 146px;
        object-fit: contain;
        display: block;
    }

</style>
  